<!DOCTYPE HTML>
<html>
<head>
    <title>盒子模型</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
    <style type="text/css">
        *{
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<p class="bold">作用：</p>
<p>用来布局网页的最基础的模型</p>
<br/>
<fieldset><legend class="bold">边距标签</legend>
    <br/>
    <p class="red">padding(内边距)</p>
    <p>　　padding-top:上边距</p>
    <p>　　padding-right:右边距</p>
    <p>　　padding-bottom:下边距</p>
    <p>　　padding-left:左边距</p>
    <p>　　还有简写的方法：padding:0px 0px 0px 0px 指上右下左</p>
    <br/>
    <p class="red">margin(外边距)</p>
    <p>　　margin-top:上边距</p>
    <p>　　margin-right:右边距</p>
    <p>　　margin-bottom:下边距</p>
    <p>　　margin-left:左边距</p>
    <br/>
    <p class="red">border(边框)</p>
    <p>　　border-top:上边框</p>
    <p>　　border-right:右边框</p>
    <p>　　border-bottom:下边框</p>
    <p>　　border-left:左边框</p>
    <p>　　边框可以设定宽度、边框线、颜色</p>
    <p>　　缩写为：如：border:10px solid #red</p>
    <br/>
</fieldset>
<br/>
<fieldset><legend class="bold">代码示例与效果</legend>
    <br/>
    <p>代码示例</p>
    <pre>
    &lt;div style="width: 300px; height: 200px; border: 1px solid;"&gt;div1
        &lt;div style="width: 200px; height: 100px;
        <span class="red">border</span>: 5px solid darkorchid;
        <span class="red">margin:20px 20px;
        padding:20px 20px;</span>"&gt;我是div2&lt;/div&gt;&lt;/div&gt;</pre>
    <br/>
    <p>代码效果</p>
    <div style="width: 300px; height: 200px; border: 1px solid;">div1
        <div style="width: 200px; height: 100px; border: 5px solid darkorchid;margin:20px 20px; padding:20px 20px;">我是div2</div>
    </div>
    <p class="bold">补充</p>
    <p>　　代码示例中的标红部分就是指内边距、外边距与边框的设定</p>
    <p>　　其中margin的边距指的就是div1与div2的盒子边距，padding指的就是div2中，文字与div2盒子的边距</p>
    <p>　　border指的就是边框的设定，上面的示例是统一设定，还可以单独设定边框的上下左右不一样的边框宽度和颜色样式</p>
</fieldset>

</body>
</html>